<div id="view-panel" style="width:1058px; height:600px; overflow:hidden; margin-left:17px;">
  <div id="inner-panel" style="width:1058px;">
    <div id="page-1" class="galleries rel" style="width:1058px;">
      <div class="fLeft" style="width:618px; height:558px; background:url(<?php e($this->base); ?>/img/contest.jpg) top left no-repeat;">
        <div class="abs hide" style="top:323px; left:31px; width:360px;"><h1>Care Contest<br />Take Care Of Me</h1></div>
      </div>
      <div class="fLeft rel" style="margin-left:15px; height:579px;">
<?php for ($x=0; $x<count($data); $x++) { ?>
        <div class="gallery" style="width:194px; height:176px;" onclick="lightbox(<?php e($data[$x]['id']); ?>)">
           <div class="thumb link" style="background:url(<?php e($this->base); ?>/img/gallery/s_<?php e($data[$x]['filename']); ?>) center top no-repeat; width:194px; height:155px;"></div>
           <div class="thumbTitle link" style="height:15px; padding-top:4px;"><?php e(htmlentities($data[$x]['title'])); ?></div>
         </div>
<?php     if ($x%2 == 1) { ?>
        <div class="clear"></div>
<?php     }
      } ?>
<?php if ($count > 5) { ?>
        <div class="abs navNext" style="right:16px;" onclick="next(1);">NEXT PAGE</div>
<?php } ?>
      </div>
    </div>
  </div>
</div>

<div id="inlineContent" style="display:none;">
<?php for ($x=0; $x<count($data); $x++) {
          $id = $data[$x]['id'];
          $bg = ($data[$x]['filename']) ? 'transparent url('.$this->base.'/img/gallery/'.$data[$x]['filename'].') center center no-repeat' : 'transparent'; ?>
  <div id="content-<?php e($id); ?>">
    <div id="bg-<?php e($id); ?>" class="fLeft" style="background:<?php e($bg); ?>; width:570px; height:380px;"></div>
    <div class="fLeft" style="padding:0 0 0 30px; width:378px; height:380px; overflow:auto;">
      <h1 id="title-<?php e($id); ?>" class="gallery-title"><?php e($data[$x]['title']); ?></h1>
      <div class="gallery-desc"><p id="author-<?php e($id); ?>">Photo By <?php e($data[$x]['author']); ?></p>
      <p id="description-<?php e($id); ?>"><?php e(nl2br($data[$x]['description'])); ?></p></div>
    </div>
    <div class="clear"></div>
  </div>
<?php } ?>
</div>

<script type="text/javascript">
var _webroot = '<?php e($this->base); ?>';
var _data    = <?php e($json); ?>;
var _curId   = 0;

function init () {
    var perpage  = 15;
    var page     = 2;
    var loaded   = 0;
    var newcount = 0;
    var total    = _data.length;
    var elem     = Ext.get('inner-panel');
    var records  = '';
    var display  = '';
    var html     = '';
    var next     = '';
    var width    = (Math.ceil(total / perpage) + 1) * elem.getWidth();

    elem.setWidth(width);

    Ext.each(_data, function(dt){
        loaded++;
        newcount++;

        if (dt.filename) {
            var bgimg = 'background:transparent url('+_webroot+'/img/gallery/'+dt.filename+') center center no-repeat';
        } else {
            var bgimg = 'background:transparent';
        }
        records += '<div class="water fLeft" style="width:194px; height:176px;" onclick="lightbox('+dt.id+')">' +
                     '<div class="thumb" style="'+bgimg+'; width:194px; height:155px;"></div>'+
                     '<div class="thumbTitle" style="height:15px; padding-top:4px;">'+dt.title+'</div>'+
                   '</div>';

        if (newcount % 5 == 0 || total == loaded) {
            records += '<div class="clear"></div>';
        }

        if (newcount == perpage || total == loaded) {
            next    = (total == loaded) ? '' : '<div class="abs navNext" style="right:18px;" onclick="next('+page+');">NEXT PAGE</div>';
            display = (Ext.isIE7 || Ext.isIE6) ? 'none' : 'block';
            html    = '<div id="page-'+page+'" class="pages rel" style="display:'+display+'; height:579px;">'+
                      '<div style="margin:2px 0 16px 13px;">'+records+'<div class="abs navPrev" style="left:15px;" onclick="prev('+page+');">PREVIOUS PAGE</div>'+next+'</div></div>';
            records = '';
            newcount = 0;

            elem.insertHtml('beforeEnd', html);
            page++;
        }

    });

    SexyLightbox.initialize({
        color: 'white',
        dir: _webroot+'/css/sexylightbox/',
        OverlayStyles : {
            'background-color': '#000',
            'opacity': 0.5
        }
    });
} // init

function view (id, page) {
    Ext.each(_data, function(e){
        if (id == e.id) {
            Ext.fly('mainshow-'+page).fadeIn({ easing:'easeOut' });

            if (e.filename) {
                Ext.fly('bg-'+page).setStyle({
                    background:'transparent url('+_webroot+'/img/gallery/'+e.filename+') center center no-repeat'
                });
            } else {
                Ext.fly('bg-'+page).setStyle({
                    background:'transparent'
                });
            }

            Ext.fly('title-'+page).update(e.title);
            Ext.fly('author-'+page).update(e.author);
            Ext.fly('description-'+page).update(e.description);
            _curId = e.id;
        }
    });
} // view

function next (page) {
    if (Ext.isIE7 || Ext.isIE6) {
        page++;
        Ext.select('div.galleries', false, 'inner-panel').setStyle({ display:'none' });
        Ext.fly('page-'+page).slideIn('r', { easing:'easeOut' });
    } else {
        $('#view-panel').stop().scrollTo({ top:0, left:'+=1058' }, 500, { easing:'swing' });
    }
} // next

function prev (page) {
    if (Ext.isIE7 || Ext.isIE6) {
        page--;
        Ext.select('div.galleries', false, 'inner-panel').setStyle({ display:'none' });
        Ext.fly('page-'+page).slideIn('l', { easing:'easeOut' });
    } else {
        $('#view-panel').stop().scrollTo({ top:0, left:'-=1058' }, 500, { easing:'swing' });
    }
} // prev

function lightbox (id) {
    var html = '';

    if (Ext.fly('content-'+id) == null) {
        Ext.each(_data, function(dt){
            if (dt.id == id) {
                if (dt.filename) {
                    var bgimg = 'background:transparent url('+_webroot+'/img/gallery/'+dt.filename+') center center no-repeat';
                } else {
                    var bgimg = 'background:transparent';
                }

                html = '<div id="content-'+id+'">' +
                         '<div id="bg-'+id+'" class="fLeft" style="'+bgimg+'; width:570px; height:380px;"></div>' +
                         '<div class="fLeft" style="padding:0 0 0 30px; width:378px; height:380px; overflow:auto;">' +
                           '<h1 id="title-'+id+'" class="gallery-title">'+dt.title+'</h1>' +
                           '<div class="gallery-desc"><p id="author-'+id+'">Photo By '+dt.author+'</p>' +
                           '<p id="description-'+id+'">'+nl2br(dt.description)+'</p></div></div>' +
                         '<div class="clear"></div>' +
                       '</div>';
            }
        });

        Ext.fly('inlineContent').insertHtml('beforeEnd', html);
    }
    SexyLightbox.display('#TB_inline?inlineId=content-'+id+'&height=380&width=978&background=#FFFFFF');
} // lightbox

function nl2br (str, is_xhtml) {
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
} // nl2br

<?php $this->addScript('Ext.onReady(function() { init(); });'); ?>
</script>